<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华为手机</title>

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <link rel="stylesheet" href="../../static/css/gsd/huawei.css">
    <style type="text/css">
        body{margin:0px;padding:0px}
        div{font:bold 32px 楷书;color: black; text-align: center}
        .main{
            width: 450px;
            margin: 0px auto;
        }
        .content{
            box-shadow: 2px 0 46px rgba(0, 0, 0, 0.18);
            border-radius: 5px;
            padding: 36px 16.666%;
            font-size: 16px;
            line-height: 22px;
            margin-bottom: 60px;
            width: 66.66666667%;
        }
        .login-btn{

            font-size: 1.1em;
        }
        .create{
            font-size:1em;
        }
   </style>

    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                alert("提交事件!");
            }
        });
        $().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
            $("#js-login-form").validate({
                rules: {
                    userName: "required",

                    password: {
                        required: true,
                        minlength: 5
                    },

                },
                messages: {
                   userName:"请输入用户名",
                    password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字母"
                    },


                }
            });
        });
    </script>
</head>
<body>
<div id="wrap-login">
    <div class="container">
        <div class="modal-header">
            <div class="login-logo">
                <p><img src="../../static/images/gsd/lo2.jpg" ></p>
            </div>
        </div>
        <div class="main">
            <div class="row">
                <div class="col-lg-6 col-sm-8">
                    <div class="content">
                        <h1>登录</h1>
                        <form id="js-login-form" novalidate="novalidate">

                            <div class="user">
                                <label for="userName">账号/邮箱<em class="red">*</em> </label>
                                <input type="text"  name="userName" id="userName" placeholder="请输入账户/邮箱">

                            </div>

                            <div class="powss">
                                <label for="password">密码<em class="red">*</em></label>

                                <input type="password"  name="password" id="password" placeholder="请输入密码" >
                            </div>

                            <div class="login-btn">
                                <a href="productshow.html" class="link-submit js-login-form-btn">登录</a>
                            </div>
                            <div class="create">
                                <a href="register.html">注册</a>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</div>
</body>
</html>